<template>
  <div id="register">
    <el-card class="box-card box-card-register">
      <div slot="header" class="clearfix">
        <span class="title">注册</span>
        <el-button style="float: right; padding: 3px 0" type="text"><router-link to="/login">登录</router-link></el-button>
      </div>
        <el-form :model="registerInfo" :rules="rules" label-width="100px" ref="registerInfo" class="demo-registerInfo">
            <el-form-item label="角色" prop="type">
                <el-select v-model="registerInfo.type" placeholder="请选择角色">
                <el-option label="客户" value="1"></el-option>
                <el-option label="快递员" value="2"></el-option>
                <el-option label="网点" value="3"></el-option>
                <el-option label="中转站" value="4"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="用户名" prop="username">
                <el-input placeholder="请输入用户名" v-model="registerInfo.username"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="telephone">
                <el-input placeholder="请输入手机号" v-model="registerInfo.telephone"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input placeholder="请输入密码" type="password" v-model="registerInfo.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input placeholder="请输入确认密码" type="password" v-model="registerInfo.checkPass" autocomplete="off"></el-input>
            </el-form-item>
            <div v-show="registerInfo.type == 3 || registerInfo.type == 4">
                <el-form-item :label="registerInfo.type == 3?'网点名称':'中转站名称'" prop="name"
                    :rules="[
                    { required: registerInfo.type == 3 || registerInfo.type == 4 ? true : false, message: registerInfo.type == 3?'请输入网点名称':'请输入中转站名称', trigger:'blur'  }
                    ]">
                    <el-input :placeholder="registerInfo.type == 3?'请输入网点名称':'请输入中转站名称'" v-model="registerInfo.name"></el-input>
                </el-form-item>
                <el-form-item label="所在地区" prop="selectedOptions"
                    :rules="[
                    { required: registerInfo.type == 3 || registerInfo.type == 4 ? true : false, message: '请选择所在地', trigger:'blur'  }
                    ]">
                    <el-cascader
                    :options="CityInfo"
                    v-model="registerInfo.selectedOptions"
                    @change="handleChange"
                    :clearable="true"
                    :filterable="true"
                    >
                    </el-cascader>
                    <!-- :change-on-select="true"
                    :clearable="true"
                    :filterable="true" -->
                </el-form-item>
                <el-form-item label="详细地址" prop="address"
                    :rules="[
                    { required: registerInfo.type == 3 || registerInfo.type == 4 ? true : false, message: '请输入详细地址', trigger:'blur'  }
                    ]">
                    <el-input placeholder="请输入详细地址" v-model="registerInfo.address"></el-input>
                </el-form-item>
                <el-form-item label="联系人" prop="linkman"
                    :rules="[
                    { required: registerInfo.type == 3 || registerInfo.type == 4 ? true : false, message: '请输入联系人姓名', trigger:'blur'  }
                    ]">
                    <el-input placeholder="请输入联系人姓名" v-model="registerInfo.linkman" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email"
                    :rules="[
                    { required: registerInfo.type == 3 || registerInfo.type == 4 ? true : false, message: '请输入邮箱地址', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                    ]">
                    <el-input placeholder="请输入邮箱地址" v-model="registerInfo.email" autocomplete="off"></el-input>
                </el-form-item>
            </div>
            <el-form-item>
                <el-radio-group>
                    <el-checkbox v-model="resource" @change="handelChecked">我同意 <a href="javascript:;" @click="open">《服务协议》</a> </el-checkbox>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
            <el-button type="primary" @click="submitForm('registerInfo')">立即注册</el-button>
            <el-button @click="resetForm('registerInfo')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
  </div>
</template>


<script>
import qs from 'qs'
import router from './../../router'
import CityInfo from '@/lib/city-data'
import global from '@/lib/global'
let that;
export default {
    name: 'Register',
    data () {
        var validatePass = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请输入密码'));
        } else {
            if (this.registerInfo.checkPass !== '') {
            this.$refs.registerInfo.validateField('checkPass');
            }
            callback();
        }
        };
        var validatePass2 = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请再次输入密码'));
        } else if (value !== this.registerInfo.password) {
            callback(new Error('两次输入密码不一致!'));
        } else {
            callback();
        }
        };
        return {
            labelPosition: 'right',
            resource: true,
            registerInfo: {
                username: '',
                name: '',
                type: '1',
                password: '',
                checkPass: '',
                telephone: '',
                email: '',
                linkman:'',
                //地区数据
                province : '',
                city : '',
                area : '',
                address: '',
                selectedOptions: [],//地区筛选数组
            },
            rules: {
                type: [
                    { required: true, message: '请选择角色', trigger: 'change' },
                ],
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true,validator: validatePass, trigger: 'blur' }
                ],
                checkPass: [
                    { required: true,validator: validatePass2, trigger: 'blur' }
                ],
                telephone: [
                    { min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },
                    {
                        pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
                        message: "请输入正确的手机号码"
                    }
                ],
                name: [
                    { required:'', message:'请输入名称', trigger: 'blur' }
                ],
                selectedOptions: [
                    { message: '请选择所在地区', trigger: 'blur' }
                ],
                address: [
                    { message: '请输入详细地址', trigger:'blur' }
                ],
                linkman:[
                    { message: '请输入联系人姓名', trigger:'blur' }
                ]
            },
            /*数据源*/
            CityInfo:CityInfo
        }
    },
    methods: {
        handleChange(value) {
            this.registerInfo.province = this.$options.filters['myAddressCity'](this.registerInfo.selectedOptions[0])
            this.registerInfo.city = this.$options.filters['myAddressErae'](this.registerInfo.selectedOptions[1])
            this.registerInfo.area = this.$options.filters['myAddressMinerae'](this.registerInfo.selectedOptions[2])
        },
        open() {
        this.$alert('这是一段服务协议内容', '《服务协议》', {
            confirmButtonText: '同意',
            callback: action => {
                this.resource = true
            }
        });
        },
        handelChecked(e,checked){
            this.resource = e
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(this.resource){
                        console.log("注册数据：",JSON.stringify(this.registerInfo))
                        // alert('submit!');
                        this.$axios({
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                            },
                            method: 'post',
                            url:  global.baseUrl + '/register',
                            data: qs.stringify(this.registerInfo)
                        })
                        .then((resp)=>{     
                            if(resp.data.success){
                                this.$message({
                                    message: '恭喜你，注册成功',
                                    type: 'success'
                                });
                                setTimeout(()=>{
                                    router.push('/login')
                                },2000)
                            }else{
                                this.$message.error(resp.data.message);
                            }
                        })
                        .catch((error)=>{
                            this.$message.error('注册失败，请重试');
                        })
                    }else{
                        this.$message.error('请阅读并同意《服务协议》');
                    }
                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
    beforeCreate: function () {
        that = this;
    },
    filters:{
        myAddressCity:function(value){
            for(var y in that.CityInfo){
                if(that.CityInfo[y].value == value){
                    return value = that.CityInfo[y].label
                }
            }
        },
        myAddressErae:function(value){
            for(var y in that.CityInfo){
                for(var z in that.CityInfo[y].children){
                    if(that.CityInfo[y].children[z].value == value && value!=undefined){
                        return value = that.CityInfo[y].children[z].label;
                    }
                }
            }
        },
        myAddressMinerae:function(value){
            for(var y in that.CityInfo){
                for(var z in that.CityInfo[y].children){
                    for(var i in that.CityInfo[y].children[z].children){
                        if(that.CityInfo[y].children[z].children[i].value == value && value!=undefined){
                            return value = that.CityInfo[y].children[z].children[i].label
                        }
                    }
                }
            }
        },
    }
}
</script>

<style>
#register{
  width: 100%;
  height: 100%;
  background: url(./../../assets/images/login-bg.jpg) no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box-card-register{
  width: 500px;
  padding: 20px;
}
.clearfix .title{
  font-size: 22px;
}
.el-select{
  display: block;
}
.el-form-item__content{
  text-align: left;
}
.mini-input{
  width: 200px;
  margin-right: 20px;
}
</style>
